{extend name="$lake_admin_layout"/}

{block name="main"}
<div class="layui-card">
    <div class="layui-card-header layui-bg-cyan">导航列表</div>
    <div class="layui-card-body">
        <table class="layui-hide" id="table" lay-filter="table"></table>
    </div>
</div>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-sm layui-iframe" href="{:url('add')}" title="添加导航">添加导航</a>
        <a class="layui-btn layui-btn-sm layui-btn-normal" id="openAll">展开/折叠</a>
        <a class="layui-btn layui-btn-sm" href="{:url('all')}">全部导航</a>
    </div>
</script>
<script type="text/html" id="actionTpl">
    <a href="{:url('add')}?parentid={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-normal layui-iframe" title="添加导航">添加</a>
    <a href='{:url("edit")}?id={{ d.id }}' class="layui-btn layui-btn-xs layui-iframe" title="编辑导航【{{ d.title }}】">编辑</a>
    <a href='{:url("delete")}?id={{ d.id }}' class="layui-btn layui-btn-danger layui-btn-xs layui-tr-del">删除</a>
</script>

<script type="text/html" id="statusTpl">
    <input type="checkbox" name="status" data-href="{:url('state')}?id={{d.id}}" value="{{d.id}}" lay-skin="switch" lay-text="开启|关闭" lay-filter="switchStatus" {{ d.status==1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="createTimeTpl">
    {{ layui.util.toDateString(d.create_time * 1000) }}
</script>
{/block}

{block name="script"}
<script>
layui.use(['table', 'treeGrid', 'notice'], function() {
    var table = layui.table,
        $ = layui.$,
        notice = layui.notice,
        treeGrid = layui.treeGrid;
        
    var ptable = treeGrid.render({
        id: 'table',
        elem: '#table',
        toolbar: '#toolbar',
        url: '{:url("index")}',
        idField: 'id',
        cellMinWidth: 100,
        treeId: 'id', //树形id字段名称
        treeUpId: 'parentid', //树形父id字段名称
        treeShowName: 'title', //以树形式显示的字段
        cellMinWidth: '150',
        height: '', // full-140
        isFilter: false,
        iconOpen: false, //是否显示图标【默认显示】
        isOpenDefault: false, //节点默认是展开还是折叠【默认展开】
        onDblClickRow: false, //去除双击事件
        cols: [
            [
                { field: 'id', width: 80, title: '#', align: "center" },
                { field: 'title', width:180, title: '标题' },
                { field: 'url', title: '链接' },
                { field: 'sort', width:80, title: '排序', align: "center", edit: 'text' },
                { field: 'create_time', width:180, title: '创建时间', templet: '#createTimeTpl' },
                { field: 'status', width: 100, title: '状态', align: "center", templet: '#statusTpl', unresize: true },
                { fixed: 'right', title: '操作', width: 160, templet: '#actionTpl' }
            ]
        ]
    });
    
    $('#openAll').click(function(e) {
        var tableId = 'table';
        var treedata = treeGrid.getDataTreeList(tableId);
        treeGrid.treeOpenAll(tableId, !treedata[0][treeGrid.config.cols.isOpen]);
    });
    
    // 监听单元格编辑
    treeGrid.on('edit(table)', function(obj) {
        var value = obj.value,
            data = obj.data;
        $.post('{:url("sort")}', { 
            'id': data.id, 
            'value': value 
        }, function(data) {
            if (data.code == 1) {
                notice.success(data.msg);
            } else {
                notice.warning(data.msg);
            }

        })
    });

});
</script>
{/block}